<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>父容器媒体查询</title>
    <style>
      .avator {
        /* flex居中 */
        display: flex;
        align-items: center;
        justify-content: center;

        /* 宽高 */
        width: 50px;
        height: 50px;

        /* 圆角颜色 */
        border-radius: 8px;
        background: #eaeaea;

        /* 别换行 */
        white-space: nowrap;
      }

      .avator-inner {
        position: relative;
      }

      .avator-inner::before {
        content: attr(alt);
        visibility: hidden;
        font-size: 40px;
      }

      /* 利用定位，将这个盒子设置的和外面的.avator-inner设置成一样大 */
      /* 也就是avator-inner::before由文字撑开，avator-inner和自己的before一样大，avator-container利用定位和avator-inner一样大 */
      .avator-container {
        position: absolute;
        inset: 0;
        container-type: inline-size;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .avator-container span {
        /* 用cqw做到与宽度成反比，也就是文字越多，avator-inner的before越大，这里的font-size也就越小 */
        font-size: calc(24px - 10cqw);
        /* 因为avator-container是定位在中间的，所以和边界没有距离，这加padding写与边界的距离 */
        display: inline-block;
        padding: 0 2px;

        overflow: hidden;
        max-width: 40px;
        text-overflow: ellipsis;
      }
    </style>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <div id="app" class="min-h-screen">
      <main class="flex place-content-center gap-16px mt-10vh">
        <!-- 创建一份一模一样的文本，让外层容器（A）宽度由内部文本决定，然后将容器盒子（B）的宽度设置成和（A）一样 -->
        <!-- 通过这样完成容器查询 -->
        <div class="avator" v-for="(item, index) in arr" :key="index">
          <!-- 外层容器的文本通过伪元素生成，文字会把avator-inner::before撑开 -->
          <div class="avator-inner" :alt="item">
            <div class="avator-container">
              <span>{{item}}</span>
            </div>
          </div>
        </div>
      </main>
    </div>

    <script>
      const vm = new Vue({
        el: "#app",
        data() {
          return {
            arr: [
              "我",
              "名字",
              "三个字",
              "有四个字",
              "A",
              "AB",
              "ABC",
              "ABCD",
              "English"
            ]
          };
        }
      });
    </script>
  </body>
</html>
